<!--
 * @Author: lcx
 * @Date: 2023-09-15 15:33:25
 * @LastEditors: lcx
 * @LastEditTime: 2023-09-15 18:23:49
 * @FilePath: \gw-pub-website-jiangxi\src\views\userCenter\userInformation\userInformation.vue
 * 
-->
<template>
    <div class="userInformation">
        <div class="searchLine">
            <div class="leftPart">
                <!-- <el-input v-model="searchForm.userName" size="mini"
                    @input="searchForm.name = verifyfilter('char', searchForm.name)" :clearable="true" class="items"
                    placeholder="请输入账号">
                </el-input>
                <el-input v-model="searchForm.name" @input="searchForm.name = verifyfilter('char', searchForm.name)" size="mini"
                    placeholder="请输入用户名" class="items" clearable>
                </el-input>
                <el-input v-model="searchForm.customerName" @input="
                    searchForm.customerName = verifyfilter(
                        'char',
                        searchForm.customerName
                    ) 
                    " size="mini" placeholder="请输入用户名"  class="items" clearable>
                </el-input>
                <el-button icon="el-icon-search" size="mini"  type="primary" @click="befSearch">查询</el-button> -->
            </div>
            <div class="rightPart">
                <el-tooltip class="rightBtn" content="新增" :open-delay="500" placement="top">
                    <el-button size="mini" icon="el-icon-plus" @click="addPlan"></el-button>
                </el-tooltip>
            </div>
        </div>
        <el-table :data="tableData" height="600" @row-click="rowClick" highlight-current-row ref="freTable" stripe
            v-loading="tableLoading" border>
            <el-table-column label="序号" min-width="50" align="left">
                <template slot-scope="scope">
                    {{ (scope.$index + 1) + (queryAll.startPage - 1) * queryAll.pageSize }}
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="用户账号" min-width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="用户名称" min-width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="customerName" label="所属公司" min-width="110" show-overflow-tooltip></el-table-column>
            <el-table-column prop="address" label="地址" min-width="130" show-overflow-tooltip></el-table-column>
            <el-table-column prop="phone" label="电话" min-width="110" show-overflow-tooltip></el-table-column>
            <el-table-column prop="fax" label="传真" min-width="110" show-overflow-tooltip></el-table-column>
            <el-table-column prop="email" label="邮箱地址" min-width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="enabled" label="有效标记" min-width="110" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{ scope.row.enabled == '0' ? '不启用' : scope.row.enabled == '1' ? '启用' : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="250">
                <template slot-scope="scope">
                    <el-button size="mini" @click="editPlan(scope.$index, scope.row)" style="color:#2166B2">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" min-width="160" show-overflow-tooltip></el-table-column>
        </el-table>

        <div class="pagination">
            <el-pagination class="pagion" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryAll.startPage" :page-sizes="[10, 15, 20, 30, 50]" :page-size="queryAll.pageSize"
                :total="queryAll.total" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
        <el-dialog  :title="planType == '01' ? '新增' : '编辑'" size="25%" :visible.sync="showPlanAdd">
            <addOrEdit v-if="showPlanAdd" :handleSave="handleSave" :detailRow="currentRow" :planType="planType">
            </addOrEdit>
        </el-dialog>
    </div>
</template>

<script>
import addOrEdit from './component/addOrEdit'
export default {
    components: {
        addOrEdit
    },
    data() {
        return {
            currentRow: {},
            tableData: [],
            showPlanAdd: false,
            tableLoading: false,
            formLabelWidth: 110,
            searchForm: {
                userName: "",
                name: "",
                customerName: "",
            },
            queryAll: {
                startPage: 1,
                pageSize: 10,
                total: 0,
            },
            planType: ''
        };
    },
    computed: {
    },
    mounted() {
        this.getList()
        // this.befSearch();
    },
    activated() { },
    methods: {

        rowClick(row) {
            this.currentRow = row;
            this.$refs.freTable.toggleRowSelection(row);
        },
        handleSave(val) {
            this.getList()
            this.showPlanAdd = false
        },
        handleSizeChange(val) {
            this.queryAll.startPage = 1;
            this.queryAll.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.queryAll.startPage = val;
            this.getList();
        },
        // befSearch() {
        //     this.queryAll.startPage = 1;
        //     this.currentRow = {};
        //     this.getList();
        // },
        /**
         * @description: 新增
         * @return {*}
         */
        addPlan() {
            this.planType = "01"
            this.showPlanAdd = true
        },

        /**
         * @description: 编辑
         * @return {*}
         */
        editPlan(index, row) {
            this.currentRow = row
            this.planType = "02"
            this.showPlanAdd = true
            // this.$nextTick(() => {
            //     this.title = '编辑'
            //     this.isShow = true
            // })
            // this.$http.get(
            //     `/psys-master-service/api/external/waag/${this.$version}/getwaagbyid?id=${row.id}`,
            // ).then(res => {
            //     this.formDetail = res.data.data
            // }).catch(error => {
            //     this.loading = false
            // });

        },

        /**
         * @description: 渲染页面数据
         * @return {*}
         */
        getList() {
            this.tableLoading = true
            let params = {
                startpage: this.queryAll.startPage,
                pagesize: this.queryAll.pageSize,

            }
            this.$api.queryCustomerUserList(params)
                .then(res => {
                    console.log(res, "res")
                    if (res.success) {
                        this.tableData = res.data.pages
                        this.tableLoading = false
                        // console.log("res.data.totalNum", res.data.totalNum)
                        this.queryAll.total = res.data.totalNum
                        console.log(this.queryAll)
                    } else {
                        this.tableData = []
                        this.tableLoading = false
                    }
                })
                .catch(error => {
                    console.log(error)
                    this.tableLoading = false
                })
        },


    },
};
</script>
<style lang="scss" scoped>
@import './index.scss';
.userInformation {
    width: 100%;
}
</style>
